Angular Custom Pipes

In this tutorial, we shall see, how to create custom pipes in angular and reuse them throughout the application.

What are Pipes?

Pipes in angular are used to transform the representation of any given value. In many cases we simply need to transform the value to another form. For example, if we want to convert a string to an uppercase then we can use built-in uppercase pipe to transform the data to uppercase. Similarly, if we need to transform the date into particular format then we use date pipe to transform into particular format.

But in some scenario, we need to transform our data to different format which cannot be done by default pipes provided by angular. In such cases, we need to go for creating a custom pipe to handle the scenario.

Creating a custom pipe

In this article lets create a pipe that would show only 10 characters and then remaining characters will be removed and appended with ... notation.

Let's create a pipe using the below angular cli command.

ng g p ellipse

The command will create a pipe and register the pipe in app.module.ts. Now open the ellipse pipe and modify the code as below

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'ellipse'
})
export class EllipsePipe implements PipeTransform {
  maxLength = 10;
  transform(value: string): string {
    let resultString = value;
    if (resultString.length > this.maxLength) {
      resultString = resultString.substr(0, this.maxLength);
      resultString += '...';
    }
    return resultString;
  }
}

Any class that is decorated with @Pipe() will act as pipe. The name of the pipe as ellipse.

The PipeTransform is an interface which will implement the transform() function. The first parameter of the transform() function has a parameter which receives the value to which the pipe has been applied. It can be a string or number or object or an array.

Since we are dealing with string we had specified the type of value as string. The pipe will be returning the transformed result which will be of type string.

Inside the transform() function we assign the value to resultString and then perform logical operation to the resultString variable. If the string length of resultString is less than 10, then we return the resultString.

If the value of resultString is greater than 10, then we take the first 10 characters of resultString variable using substr() function and append ... to resultString and return the resultString.

Use Custom pipe in Component

To use this pipe to an element we open any component say, app.component.html file and paste the following code.

<p>{{ 'Welcome to Readers Buddy.' | ellipse}}</p>

Here | represents pipe symbol and ellipse is the name of the pipe. This will display the result as

Welcome to...

Custom pipe with dynamic value

Suppose, if we need to specify the length to be considered dynamically, that is also possible with pipes. Pipes can dynamically get any number of parameters using colon symbol.

Next, modify the coding of pipe so that it can get the length dynamically.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'ellipse'
})
export class EllipsePipe implements PipeTransform {
  transform(value: string, length = 10): any {
    let resultString = value;
    if (resultString.length > length) {
      resultString = resultString.substr(0, length);
      resultString += '...';
    }
    return resultString;
  }
}

Now, the transform() function has an additional parameter length with default value 10.

It's always a good practise to set a default value so that if parameter is not specified in the pipe the it would make use of the default value.

To make use of the pipe we simple modify the code as below

<p>{{ 'Welcome to Readers Buddy.' | ellipse:14}}</p>

Here after applying the ellipse pipe we pass parameter with colon symbol and parameter value. Here 14 is the length value which replaced the default value. This will finally produce a result as

Welcome to Rea...

Pipes don't have restriction for parameters. Any number of parameters can be supplied to the transform function, provided, the pipe's transform function needs to handle those parameters.